<!DOCTYPE html>
<meta name='viewport' content='width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'>
<!-- three.js library -->
<script src='../vendor/three.js/build/three.js'></script>
<script src='../vendor/three.js/examples/js/libs/stats.min.js'></script>
<!-- jsartookit -->
<script src='../../vendor/jsartoolkit5/build/artoolkit.min.js'></script>
<script src='../../vendor/jsartoolkit5/js/artoolkit.api.js'></script>
<!-- include threex.artoolkit -->
<script src='../../src/threex/threex-artoolkitsource.js'></script>
<script src='../../src/threex/threex-artoolkitcontext.js'></script>
<script src='../../src/threex/threex-artoolkitprofile.js'></script>
<script src='../../src/threex/threex-arbasecontrols.js'></script>
<script src='../../src/threex/threex-armarkercontrols.js'></script>
<script src='../../src/threex/threex-armarkercloak.js'></script>
<script src='./threex-arliquiqmarker.js'></script>
<script>THREEx.ArToolkitContext.baseURL = '../../'</script>

<body style='margin : 0px; overflow: hidden; font-family: Monospace; user-select: none;'><div style='position: absolute; top: 10px; width:100%; text-align: center;z-index:1';>
	<a href='https://github.com/jeromeetienne/AR.js/' target='_blank'>AR.js</a> - Liquid Marker - Click to touch the liquid.
	<br/>
	Code by <a href='https://twitter.com/snigelpaogat' target='_blank'>Fredrik Blomqvist</a> and
	<a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
</div>
	<style>
		#controls {
			position: fixed;
			top: 0px;
			right: 0px;
			width:400px;
			margin:10px auto;
			z-index: 2;
		}
		#controls > div {
			border-bottom:1px solid #EEE;
			padding:5px 0;
		}
		#controls label {
			width:200px;
			display:inline-block;
		}
		#controls input {
			vertical-align:middle;
		}
	</style>
	<div id="controls" style='display:none'>
		<div>
			<label>Stiffness (<span id="k_slider_label">-20</span> kg / s<sup>2</sup>)</label> 
			<input id="k_slider" type="range" min=0 max=100 value=20></input>
		</div>
		<div>
			<label>Damping (<span id="b_slider_label">-0.5</span> kg / s)</label> 
			<input id="b_slider" type="range" min=0 max=10 value=0.5 step=0.1></input>
		</div>
		<div>
			<label>Frequency (<span id="f_slider_label">0</span>) Hz</label> 
			<input id="f_slider" type="range" min=0 max=10 value=0 step=0.1></input>
		</div>
		<div>
			<label>Mass (<span id="m_slider_label">0.5</span>) kg</label> 
			<input id="m_slider" type="range" min=0.1 max=5 value=0.5 step=0.1></input>
		</div>
		
	</div>
	
<script>
	//////////////////////////////////////////////////////////////////////////////////
	//		Init
	//////////////////////////////////////////////////////////////////////////////////

	// init renderer
	var renderer	= new THREE.WebGLRenderer({
		// antialias	: true,
		alpha: true
	});
	renderer.setClearColor(new THREE.Color('lightgrey'), 0)
	// renderer.setPixelRatio( 2 );
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.domElement.style.position = 'absolute'
	renderer.domElement.style.top = '0px'
	renderer.domElement.style.left = '0px'
	document.body.appendChild( renderer.domElement );

	renderer.autoClear = false;

	// array of functions for the rendering loop
	var onRenderFcts= [];

	// init scene and camera
	var scene	= new THREE.Scene();

	var ambient = new THREE.AmbientLight( 0x666666 );
	scene.add( ambient );

	var directionalLight = new THREE.DirectionalLight( 0x887766 );
	directionalLight.position.set( -1, 1, 1 ).normalize();
	scene.add( directionalLight );
	
	//////////////////////////////////////////////////////////////////////////////////
	//		Initialize a basic camera
	//////////////////////////////////////////////////////////////////////////////////

	// Create a camera
	var camera = new THREE.Camera();
	scene.add(camera);
	
	var listener = new THREE.AudioListener();
	camera.add( listener );

	var boingSound = new THREE.Audio( listener );

	var audioLoader = new THREE.AudioLoader();
	audioLoader.load( 'sounds/140867__juskiddink__boing.wav', function( buffer ) {
		boingSound.setBuffer( buffer );
		// boingSound.setLoop(true);
		boingSound.setVolume(0.5);
	});
					
	////////////////////////////////////////////////////////////////////////////////
	//          handle arToolkitSource
	////////////////////////////////////////////////////////////////////////////////

	var arToolkitSource = new THREEx.ArToolkitSource({
		// to read from the webcam 
		sourceType : 'webcam',
		// 
		// to read from an image
		// sourceType : 'image',
		// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg',		

		// to read from a video
		// sourceType : 'video',
		// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4',		
	})

	arToolkitSource.init(function onReady(){
		// handle resize of renderer
		arToolkitSource.onResize(renderer.domElement)		
	})
	
	// handle resize
	window.addEventListener('resize', function(){
		// handle arToolkitSource resize
		arToolkitSource.onResize(renderer.domElement)		
	})

	////////////////////////////////////////////////////////////////////////////////
	//          initialize arToolkitContext
	////////////////////////////////////////////////////////////////////////////////	

	// create atToolkitContext
	var arToolkitContext = new THREEx.ArToolkitContext({
		cameraParametersUrl: THREEx.ArToolkitContext.baseURL + '../data/data/camera_para.dat',
		detectionMode: 'mono',
		imageSmoothingEnabled: false,
		maxDetectionRate: 15,
		canvasWidth: 80*4,
		canvasHeight: 60*4,
	})
	// initialize it
	arToolkitContext.init(function onCompleted(){
		// copy projection matrix to camera
		camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
	})

	// update artoolkit on every frame
	onRenderFcts.push(function(){
		if( arToolkitSource.ready === false )	return

		arToolkitContext.update( arToolkitSource.domElement )
	})
	
	
	////////////////////////////////////////////////////////////////////////////////
	//          Create a ArMarkerControls
	////////////////////////////////////////////////////////////////////////////////
	
	var markerRoot = new THREE.Group
	scene.add(markerRoot)
	var artoolkitMarker = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
		type : 'pattern',
		patternUrl : THREEx.ArToolkitContext.baseURL+'../data/data/patt.hiro',
		// patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.kanji',
	})

	//////////////////////////////////////////////////////////////////////////////////
	//		build videoTexture
	//////////////////////////////////////////////////////////////////////////////////
	
	// get videoTexture
	if( arToolkitSource.domElement.nodeName === 'VIDEO' ){
		var videoTexture = new THREE.VideoTexture(arToolkitSource.domElement)
		// arToolkitSource.domElement.pause()
	}else if( arToolkitSource.domElement.nodeName === 'IMG' ){
		var videoTexture = new THREE.Texture(arToolkitSource.domElement)
		videoTexture.needsUpdate = true		
	}else console.assert(false)
	// TODO to remove if webgl2 - better visual ?
	videoTexture.minFilter =  THREE.NearestFilter


	//////////////////////////////////////////////////////////////////////////////
	//		add liquidMarker
	//////////////////////////////////////////////////////////////////////////////
	var liquidMarker =  new THREEx.ArLiquidMarker(videoTexture);
	markerRoot.add(liquidMarker.object3d)
	// liquidMarker.object3d.visible = false
	
	onRenderFcts.push(function(){
		liquidMarker.update()
	})
	
	//////////////////////////////////////////////////////////////////////////////
	//		Code Separator
	//////////////////////////////////////////////////////////////////////////////
;(function(){
	var globalIntensity = liquidMarker.object3d.material.uniforms.globalIntensity
	
	// mass spring system by the great @bkanber - standalone - a few line in a jsfiddle 😍 https://jsfiddle.net/bkanber/pDngH/ 

	/* Spring stiffness, in kg / s^2 */
	var k = -70;
	var spring_length = 180;

	/* Damping constant, in kg / s */
	var b = -1.1;

	/* Block position and velocity. */
	var block = {x: 0, v: 0, mass: 0.2};
	var wall  = {x: 30,  lx: 30, v: 0, t: 0, frequency: 0};
	
	var period = 1/60
	setInterval(function(){
		/* Move the wall. */
		wall.t += period;
		wall.lx = wall.x;
		wall.x = 30 + 70 * Math.sin(2 * Math.PI * wall.frequency * wall.t);
		wall.v = (wall.x - wall.lx) / period;


		var outsideControls = false
		if ( outsideControls === false ){
			var F_spring = k * ( (block.x - wall.x) - spring_length );
			var F_damper = b * ( block.v - wall.v );

			var a = ( F_spring + F_damper ) / block.mass;
			block.v += a * period;
			block.x += block.v * period;
		}


		var globalIntensity = liquidMarker.object3d.material.uniforms.globalIntensity
		globalIntensity.value = (block.x - 210)/210		
	}, 1000*period)
	
	function triggerBoing(){
		block.x -= 200
		boingSound.play()		
	}
	document.body.addEventListener('click', triggerBoing)
	document.body.addEventListener('keypress', triggerBoing)
	
	// bind event for parameters tuning
	// document.querySelector('#controls').style.display = ''
	document.getElementById('k_slider').onchange = function() {
		this.innerHTML = this.value;
		k = -1 * parseInt(this.value);
		document.getElementById('k_slider_label').innerHTML = k;
	};
	
	document.getElementById('b_slider').onchange = function() {
		this.innerHTML = this.value;
		b = -1 * parseFloat(this.value);
		document.getElementById('b_slider_label').innerHTML = b;
	};
	
	document.getElementById('f_slider').onchange = function() {
		this.innerHTML = this.value;
		wall.frequency = parseFloat(this.value);
		document.getElementById('f_slider_label').innerHTML = wall.frequency;
	};
	
	document.getElementById('m_slider').onchange = function() {
		this.innerHTML = this.value;
		block.mass = parseFloat(this.value);
		document.getElementById('m_slider_label').innerHTML = block.mass;
	};
	
})()

;(function(){
return
	var geometryParameters = liquidMarker.object3d.geometry.parameters
        var geometry = new THREE.PlaneGeometry(2,2,16*4-1,32*4-1)
        var geometry = new THREE.PlaneGeometry(geometryParameters.width, geometryParameters.height, geometryParameters.widthSegments, geometryParameters.heightSegments)
	var texture = new THREE.TextureLoader().load(THREEx.ArToolkitContext.baseURL+'../data/images/25P1geh.png')
	texture.anisotropy = renderer.getMaxAnisotropy()
        texture.repeat.set(50,50)
        texture.wrapS = THREE.RepeatWrapping;
        texture.wrapT = THREE.RepeatWrapping;	
	
        // var material = new THREE.MeshBasicMaterial({
        //         map: texture,
	// 	color: 0x01BE00,
	// 	opacity: 4,
	// 	transparent: true,
        //         side: THREE.DoubleSide,
        // })
	var material = new THREE.ShaderMaterial( {
		vertexShader: THREEx.ArLiquidMarker.vertexShader,
		fragmentShader: `
			varying vec2 vUv;
			varying vec3 vPosition;
			uniform sampler2D texture;
			uniform float opacity;
			uniform float globalIntensity;
			uniform float time;
		
			void main(void){
				vec2 repeat = vec2(30.0);
				vec4 color = texture2D( texture, vUv*repeat ).rgba;
				color.a += 0.5;
				color.a = globalIntensity;
				// vec4 color = vec4(1.0);
	
				float radius = length(vPosition);
				color *= 1.0-radius*1.6;
				color.rgb *= 5.0;
				// 
				// // float circleWidth
				// if( mod(radius-time/5.0, 0.1) < 0.01 ){
				// 	color *= 10.0 * intensity + 1.0;
				// }else{
				// 	color.rgb *= 1.0;
				// }
	
				gl_FragColor = color;
			}
		`,
		uniforms: {
			texture: {
				value: texture
			},
                        globalIntensity: {
                                value: 1.0                            
                        },
                        time: {
                                value: 0
                        },
		},
		defines: {
			uvToMarkerSpaceEnabled: 0,
		},
		transparent: true,
                side: THREE.FrontSide,
	});
	// animate the material
        var startedAt = performance.now()/1000
	onRenderFcts.push(function(){
		mesh.material.uniforms.globalIntensity.value = liquidMarker.object3d.material.uniforms.globalIntensity.value
		mesh.material.uniforms.time.value = performance.now()/1000 - startedAt
	})	
	
	// create the mesh
	var mesh = new THREE.Mesh( geometry, material );
	mesh.rotation.x = -Math.PI/2
	// mesh.position.y = 0.08
	// mesh.position.y = 0.2
	markerRoot.add(mesh)
})()

	//////////////////////////////////////////////////////////////////////////////
	//		opacity animation
	//////////////////////////////////////////////////////////////////////////////
	
	// // animation opacity
	// var targetWaveHeight = 1.0
	// onRenderFcts.push(function(delta){
	// 	var globalIntensity = liquidMarker.object3d.material.uniforms.globalIntensity
	// 	var speed = delta * 2
	// 	if( globalIntensity.value > targetWaveHeight ){
	// 		globalIntensity.value -= speed
	// 		if( globalIntensity.value < targetWaveHeight ){
	// 			globalIntensity.value = targetWaveHeight
	// 		}
	// 	}
	// 
	// 	if( globalIntensity.value < targetWaveHeight ){
	// 		globalIntensity.value += speed
	// 		if( globalIntensity.value > targetWaveHeight ){
	// 			globalIntensity.value = targetWaveHeight
	// 		}
	// 	}
	// 	// console.log(intensity.value)
	// })
	// 
	// // toggleCloak on click/keypress
	// function toggleCloak(){
	// 	if( targetWaveHeight === 1.0 ){
	// 		targetWaveHeight = 0.0
	// 	}else{
	// 		targetWaveHeight = 1.0
	// 	}
	// }
	// document.body.addEventListener('click', toggleCloak)
	// document.body.addEventListener('keypress', toggleCloak)

	//////////////////////////////////////////////////////////////////////////////////
	//		render the whole thing on the page
	//////////////////////////////////////////////////////////////////////////////////
	var stats = new Stats();
	// document.body.appendChild( stats.dom );
	// render the scene
	onRenderFcts.push(function(){
		
		renderer.clear();
		
		renderer.render( scene, camera );

		// stats.update();
	})

	// run the rendering loop
	var lastTimeMsec= null
	requestAnimationFrame(function animate(nowMsec){
		// keep looping
		requestAnimationFrame( animate );
		// measure time
		lastTimeMsec	= lastTimeMsec || nowMsec-1000/60
		var deltaMsec	= Math.min(200, nowMsec - lastTimeMsec)
		lastTimeMsec	= nowMsec
		// call each update function
		onRenderFcts.forEach(function(onRenderFct){
			onRenderFct(deltaMsec/1000, nowMsec/1000)
		})
	})
</script></body>
